import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';
import { FileText, Files as FilesIcon, Settings as SettingsIcon, Info } from 'lucide-react';
import { Toaster } from 'sonner';
import Editor from './pages/Editor';
import Files from './pages/Files';
import Settings from './pages/Settings';
import About from './pages/About';

const Navigation: React.FC = () => {
  const location = useLocation();
  
  const navItems = [
    { path: '/', icon: FileText, label: '编辑器' },
    { path: '/files', icon: FilesIcon, label: '文件管理' },
    { path: '/settings', icon: SettingsIcon, label: '设置' },
    { path: '/about', icon: Info, label: '关于' }
  ];
  
  return (
    <nav className="bg-white border-b border-gray-200 px-6 py-3">
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-8">
          <h1 className="text-xl font-bold text-blue-800">YAML编辑器</h1>
          <div className="flex space-x-6">
            {navItems.map(({ path, icon: Icon, label }) => (
              <Link
                key={path}
                to={path}
                className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                  location.pathname === path
                    ? 'bg-blue-100 text-blue-700'
                    : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'
                }`}
              >
                <Icon size={16} />
                <span>{label}</span>
              </Link>
            ))}
          </div>
        </div>
      </div>
    </nav>
  );
};

function App() {
  return (
    <Router>
      <div className="min-h-screen bg-gray-50">
        <Navigation />
        <Routes>
          <Route path="/" element={<Editor />} />
          <Route path="/files" element={<Files />} />
          <Route path="/settings" element={<Settings />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </div>
      <Toaster position="top-right" richColors />
    </Router>
  );
}

export default App
